<template>
  <div>
    <el-card shadow="never">
      <vxe-grid v-bind="gridOptions" v-on="gridEvents" ref="xGrid">
        <!-- 表单 start -->
        <template #actionItem>
          <el-button
            color="#1E3485"
            size="small"
            icon="Edit"
            @click="rowAdd"
          >新建</el-button
          >
          <el-button
            size="small"
            color="#1E3485"
            icon="Search"
            @click="searchChange"
          >搜索</el-button
          >
          <el-button
            size="small"
            type="default"
            icon="Delete"
            @click="searchReset"
          >清空</el-button
          >
          <el-button
            size="small"
            type="info"
            icon="Setting"
            @click="permissionDialogOpen"
          >权限设置</el-button
          >
        </template>
        <!-- 表单 end -->

        <!-- 表格 start -->
        <template #menu="{ row }">
          <vxe-button
            type="text"
            size="small"
            @click="rowView(row)"
          >
            查看
          </vxe-button>
          <vxe-button
            type="text"
            size="small"
            @click="rowEdit(row)"
          >
            编辑
          </vxe-button>
          <vxe-button
            type="text"
            size="small"
            @click="rowDel(row)"
          >
            删除
          </vxe-button>
        </template>
        <!-- 表格 end -->
      </vxe-grid>


    </el-card>

    <EditDialog
      @register="EditDialogModal.register"
    />
    <PermissionDialog  @register="PermissionDialogModal.register" />
  </div>
</template>

<script lang="ts" setup>
  import {getCurrentInstance, reactive, ref} from 'vue'
  import type { VxeGridProps, VxeGridListeners, VxeFormInstance } from 'vxe-table'
  import EditDialog, { useEditDialog } from './components/EditDialog'
  import PermissionDialog, { usePermissionDialog } from './components/PermissionDialog'
  import {getSettings} from "./settings";
  import {getDeptList} from "@/api/ERP_baseMessage";
  import {ElMessage} from "element-plus";

  const instance = getCurrentInstance()
  const globalThis = instance.appContext.config.globalProperties

  const EditDialogModal = useEditDialog()
  const PermissionDialogModal = usePermissionDialog()


  // 前端分页
  const getList = async () => {
    if(gridOptions.loading) return
    gridOptions.loading = true
    console.log(gridOptions.formConfig.data)
    const params: ApiParams = {
      pageIndex: gridOptions.pagerConfig.currentPage,
      pageSize: gridOptions.pagerConfig.pageSize,
      ...gridOptions.formConfig.data,
    };

    try {
      const response: ApiResponse = await getDeptList(params);
      gridOptions.data = response.data.records;
      gridOptions.pagerConfig.total = response.data.totalElements;
    } catch (error) {
      ElMessage.error("获取表格数据失败");
    } finally {
      gridOptions.loading = false;
    }
  }
  const xGrid = ref<VxeFormInstance>()
  const gridOptions = reactive<VxeGridProps<RowVO>>({
    ...getSettings(),
    data: [],
  })

  const searchChange = () => {
    gridOptions.pagerConfig.currentPage = 1
    getList()
  }
  const searchReset = () => {
    const $xGrid = xGrid.value
    const $form = $xGrid.getRefMaps().refForm.value
    if ($form) {
      $form.reset()
    }
    gridOptions.pagerConfig.currentPage = 1
    gridOptions.pagerConfig.pageSize = 10
    getList()
  }

  const permissionDialogOpen = () => {
    const $xGrid = xGrid.value
    const list  = $xGrid.getCheckboxRecords()
    if(list.length === 0) {
      globalThis.$message.warning('请选择至少一条数据')
      return
    }else {
      PermissionDialogModal.open()
    }
  }
  const rowAdd = () => {
    console.log('rowAdd()')
    EditDialogModal.open({
      type: 'add',
    })
  }
  const rowEdit = (row) => {
    console.log('edit()')
    EditDialogModal.open({
      type: 'edit',
    })
  }
  const rowView = (row) => {
    console.log('view()')
    EditDialogModal.open({
      type: 'view',
    })
  }
  const rowDel = () => {
    globalThis.$confirm(
      `确认删除选中的数据吗？`,
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
      .then(() => {
        globalThis.$message.success('删除成功')
        getList()
      })
  }

  const gridEvents: VxeGridListeners = {
    pageChange ({ pageSize, currentPage }) {
      gridOptions.pagerConfig.currentPage = currentPage
      gridOptions.pagerConfig.pageSize = pageSize
      getList()
    },
    formReset() {
      console.log('reset')
    }
  }
  getList()
</script>
